<!DOCTYPE html>



  


<html class="theme-next gemini use-motion" lang="zh-Hans">
<head><meta name="generator" content="Hexo 3.9.0">
  <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="theme-color" content="#222">









<meta http-equiv="Cache-Control" content="no-transform">
<meta http-equiv="Cache-Control" content="no-siteapp">
















  
  
  <link href="/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css">







<link href="/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css">

<link href="/css/main.css?v=5.1.4" rel="stylesheet" type="text/css">


  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-hemisu.png?v=5.1.4">


  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-hemisu.png?v=5.1.4">


  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-hemisu.png?v=5.1.4">


  <link rel="mask-icon" href="/images/logo.svg?v=5.1.4" color="#222">





  <meta name="keywords" content="JavaScript,React,Redux,">










<meta name="description" content="前言这本由程墨编写的《深入浅出React和Redux》是从我入门React之初，在翻阅官方文档之后开始看的，第一次看时一头雾水，仅为了了解React怎么用； 再翻一次开始看得懂性能优化和Redux这类状态应用管理的使用。 随着对React不断的深入，课余的拓展阅读，发现即使是17年年初出版，在React版本更新迅速、API不断变动的情况下，这本书依旧可以带来不一样的阅读体验。 本书的总共12章节，">
<meta name="keywords" content="JavaScript,React,Redux">
<meta property="og:type" content="article">
<meta property="og:title" content="《深入浅出React和Redux》读书笔记">
<meta property="og:url" content="http://www.hemisu.com/2018/05/02/2018-5-2-React-redux/index.html">
<meta property="og:site_name" content="何米酥`s Blog">
<meta property="og:description" content="前言这本由程墨编写的《深入浅出React和Redux》是从我入门React之初，在翻阅官方文档之后开始看的，第一次看时一头雾水，仅为了了解React怎么用； 再翻一次开始看得懂性能优化和Redux这类状态应用管理的使用。 随着对React不断的深入，课余的拓展阅读，发现即使是17年年初出版，在React版本更新迅速、API不断变动的情况下，这本书依旧可以带来不一样的阅读体验。 本书的总共12章节，">
<meta property="og:locale" content="zh-Hans">
<meta property="og:image" content="https://ws2.sinaimg.cn/large/006tNc79gy1fqwt6ek2qzj30e308dq3z.jpg">
<meta property="og:image" content="https://ws2.sinaimg.cn/large/006tNc79gy1fqwt73uo03j30e308n3zq.jpg">
<meta property="og:image" content="https://ws1.sinaimg.cn/large/006tNc79gy1fqwt7knll1j30e30citaq.jpg">
<meta property="og:image" content="https://ws2.sinaimg.cn/large/006tNc79gy1fqwt8oikjuj30e40anjt3.jpg">
<meta property="og:image" content="https://ws1.sinaimg.cn/large/006tNc79gy1fqwt92utctj30e309675k.jpg">
<meta property="og:image" content="https://ws4.sinaimg.cn/large/006tNc79gy1fqwtawwh39j30e3059mxl.jpg">
<meta property="og:image" content="https://ws3.sinaimg.cn/large/006tNc79gy1fqwtbeon9gj30e3052weu.jpg">
<meta property="og:image" content="https://ws4.sinaimg.cn/large/006tNc79gy1fqwtc01ddfj30e406k74s.jpg">
<meta property="og:image" content="https://ws2.sinaimg.cn/large/006tNc79gy1fqwtccei13j30e406ljry.jpg">
<meta property="og:image" content="https://ws3.sinaimg.cn/large/006tNc79gy1fqwte17ddfj30e307ljs7.jpg">
<meta property="og:image" content="https://ws2.sinaimg.cn/large/006tNc79gy1fqwtefi98aj30e408tjsg.jpg">
<meta property="og:image" content="https://ws4.sinaimg.cn/large/006tNc79ly1fqwth8jtksj30e30bw760.jpg">
<meta property="og:image" content="https://ws3.sinaimg.cn/large/006tNc79ly1fqwthhu2alj309b09kwf8.jpg">
<meta property="og:image" content="https://ws3.sinaimg.cn/large/006tNc79ly1fqwthtxs79j30e30cnmyx.jpg">
<meta property="og:updated_time" content="2020-09-27T05:22:33.708Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="《深入浅出React和Redux》读书笔记">
<meta name="twitter:description" content="前言这本由程墨编写的《深入浅出React和Redux》是从我入门React之初，在翻阅官方文档之后开始看的，第一次看时一头雾水，仅为了了解React怎么用； 再翻一次开始看得懂性能优化和Redux这类状态应用管理的使用。 随着对React不断的深入，课余的拓展阅读，发现即使是17年年初出版，在React版本更新迅速、API不断变动的情况下，这本书依旧可以带来不一样的阅读体验。 本书的总共12章节，">
<meta name="twitter:image" content="https://ws2.sinaimg.cn/large/006tNc79gy1fqwt6ek2qzj30e308dq3z.jpg">



<script type="text/javascript" id="hexo.configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    root: '/',
    scheme: 'Gemini',
    version: '5.1.4',
    sidebar: {"position":"left","display":"post","offset":12,"b2t":true,"scrollpercent":true,"onmobile":false},
    fancybox: true,
    tabs: true,
    motion: {"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},
    duoshuo: {
      userId: '0',
      author: '博主'
    },
    algolia: {
      applicationID: '',
      apiKey: '',
      indexName: '',
      hits: {"per_page":10},
      labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
    }
  };
</script>



  <link rel="canonical" href="http://www.hemisu.com/2018/05/02/2018-5-2-React-redux/">





  <title>《深入浅出React和Redux》读书笔记 | 何米酥`s Blog</title>
  








  <!-- Hotjar Tracking Code for www.hemisu.com -->
  <script>
      (function(h,o,t,j,a,r){
          h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
          h._hjSettings={hjid:1933736,hjsv:6};
          a=o.getElementsByTagName('head')[0];
          r=o.createElement('script');r.async=1;
          r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
          a.appendChild(r);
      })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
  </script>
</head>

<body itemscope itemtype="http://schema.org/WebPage" lang="zh-Hans">

  
  
    
  

  <div class="container sidebar-position-left page-post-detail">
    <div class="headband"></div>

    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-wrapper">
  <div class="site-meta ">
    

    <div class="custom-logo-site-title">
      <a href="/" class="brand" rel="start">
        <span class="logo-line-before"><i></i></span>
        <span class="site-title">何米酥`s Blog</span>
        <span class="logo-line-after"><i></i></span>
      </a>
    </div>
      
        <p class="site-subtitle">EFE</p>
      
  </div>

  <div class="site-nav-toggle">
    <button>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
    </button>
  </div>
</div>

<nav class="site-nav">
  

  
    <ul id="menu" class="menu">
      
        
        <li class="menu-item menu-item-home">
          <a href="/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-home"></i> <br>
            
            首页
          </a>
        </li>
      
        
        <li class="menu-item menu-item-about">
          <a href="/about/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-user"></i> <br>
            
            关于
          </a>
        </li>
      
        
        <li class="menu-item menu-item-tags">
          <a href="/tags/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-tags"></i> <br>
            
            标签
          </a>
        </li>
      
        
        <li class="menu-item menu-item-categories">
          <a href="/categories/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-th"></i> <br>
            
            分类
          </a>
        </li>
      
        
        <li class="menu-item menu-item-archives">
          <a href="/archives/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-archive"></i> <br>
            
            归档
          </a>
        </li>
      

      
    </ul>
  

  
</nav>



 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">
            

  <div id="posts" class="posts-expand">
    

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="http://www.hemisu.com/2018/05/02/2018-5-2-React-redux/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="何米酥">
      <meta itemprop="description" content>
      <meta itemprop="image" content="/images/avatar.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="何米酥`s Blog">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">《深入浅出React和Redux》读书笔记</h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2018-05-02T10:54:21+00:00">
                2018-05-02
              </time>
            

            

            
          </span>

          
            <span class="post-category">
            
              <span class="post-meta-divider">|</span>
            
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              
                <span class="post-meta-item-text">分类于</span>
              
              
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/前端/" itemprop="url" rel="index">
                    <span itemprop="name">前端</span>
                  </a>
                </span>

                
                
              
            </span>
          

          
            
          

          
          

          

          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        <h1 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h1><p>这本由程墨编写的《深入浅出React和Redux》是从我入门React之初，在翻阅官方文档之后开始看的，第一次看时一头雾水，仅为了了解React怎么用；</p>
<p>再翻一次开始看得懂性能优化和Redux这类状态应用管理的使用。</p>
<p>随着对React不断的深入，课余的拓展阅读，发现即使是17年年初出版，在React版本更新迅速、API不断变动的情况下，这本书依旧可以带来不一样的阅读体验。</p>
<p>本书的总共12章节，1-2章讲了React的核心理念，3-4章重点讲解状态管理的演化过程，第5章讲解性能优化，提出了虚拟DOM和调和过程，第6章提出了高阶组件(HOC)，注重于抽象和组合，第7，9章立足于第3章引入的Redux，对副作用的处理引入了解决方案，第8章讲解了单元测试，第10章及之后，除去第11章对于路由的使用，其余的动画、服务器同构等因为暂未实践理解不到位就不予讨论了。</p>
<p>如果要对React一步一步分析下来，它可以讲解的知识点怕是可以出好几本动物书。但是React的重要理念或是思想是简单的，主要是以下两点：</p>
<ul>
<li>由<strong>数据驱动</strong>的响应式编程思想，概况为<strong>UI = render(data)</strong></li>
<li>一切基于<strong>组件</strong></li>
</ul>
<a id="more"></a>
<h1 id="数据驱动的响应式编程"><a href="#数据驱动的响应式编程" class="headerlink" title="数据驱动的响应式编程"></a>数据驱动的响应式编程</h1><p>书中拿React与前端利器jQuery作对比，实现一个ClickCounter功能举例如下：</p>
<ul>
<li>html代码：</li>
</ul>
<p><img src="https://ws2.sinaimg.cn/large/006tNc79gy1fqwt6ek2qzj30e308dq3z.jpg" alt></p>
<ul>
<li>jQuery代码：</li>
</ul>
<p><img src="https://ws2.sinaimg.cn/large/006tNc79gy1fqwt73uo03j30e308n3zq.jpg" alt></p>
<p>可以看出html仅作为展示，没有任何交互功能。</p>
<p>在jQuery的解决方案中，首先根据id选择器找到了ClickMe按钮，绑定上一个click点击的匿名事件处理函数，在事件处理函数中，选中需要被修改的DOM元素，读取其值并作出修改，最后再修改这个DOM元素。这种做法直观且容易理解，一出世就获得了普遍认可（其中还需要考虑到jQuery解决了浏览器兼容问题）。</p>
<p>但是，对于庞大项目，繁重的DOM获取，DOM操作直接导致代码结构复杂，难以维护。而对于React来说，这只需要一个组件即可完成，不需要做过多的DOM操作，计数状态可以仅存在组件中，随着状态的变化带动界面的变化。</p>
<p><img src="https://ws1.sinaimg.cn/large/006tNc79gy1fqwt7knll1j30e30citaq.jpg" alt></p>
<p>如何带动界面变化，其中发生了什么，这就涉及到React的声明式渲染了。</p>
<p>jQuery可以看做是c语言这类<strong>命令式编程</strong>，我们需要控制一件事情具体的每一个步骤，告诉系统怎么这么做，比如之前，我们要找到按钮的DOM，再找到显示计数的DOM，然后绑定事件，最后显示等详细的运行流程。而React则是<strong>声明式编程</strong>，它告诉系统要做什么，具体怎么实现则由系统自行完成。例如：</p>
<p><img src="https://ws2.sinaimg.cn/large/006tNc79gy1fqwt8oikjuj30e40anjt3.jpg" alt></p>
<p>这种命令式写法，遍历了整个numbers数组，取出后乘以2再放入新的数组。<br>而声明式写法则如下：map将整个数组的过程归纳抽离，专注于描述我们想做什么（每个值乘以二）。</p>
<p><img src="https://ws1.sinaimg.cn/large/006tNc79gy1fqwt92utctj30e309675k.jpg" alt></p>
<p>React中的响应式编程思想体现在它的声明式渲染之中，作为开发者，我们只需要维护一个组件的props和state，React会帮我们处理相应的DOM操作，通过不停的检测和重复渲染来实现之前所描述的一个公式：UI=render(data)。</p>
<p>不停的渲染必然会导致性能的下降，毕竟在jQuery的实现方式中，我们可以清楚地看到每次只有需要变化的那一个DOM被修改了，即使遇到大量的事件变动，如resize，scroll也可以使用节流来控制；可是在React的实现方法中，看起来每次render函数被调用，都要把整个组件重新描绘一次，看起来十分浪费性能。</p>
<h2 id="虚拟DOM"><a href="#虚拟DOM" class="headerlink" title="虚拟DOM"></a>虚拟DOM</h2><p>React当然有考虑过多次重复渲染的问题：利用虚拟DOM，让每次渲染都只重新渲染最少的DOM元素。</p>
<p>要了解虚拟DOM，首先要了解DOM，DOM是结构化文本的抽象表达形式，特定于WEB环境中，这个结构化文本就是HTML文本，HTML中的每个元素都对应DOM中某个节点，这样，因为HMTL元素的逐级包含关系，DOM节点自然就构成了一个树形结构。浏览器在渲染网页时，会先将HTML文本解析以构建DOM树，将CSS文本构建为样式树，接着将两树合并成渲染树，最后绘制到网页上。</p>
<p>尽量减少DOM操作，减少回流和重汇，是Web前端开发的性能优化中的一项重要原则。React的虚拟DOM正是对DOM树的抽象。比如上文中Counter组件的编写，React会将它先转换成虚拟的DOM，虚拟DOM并不会触及浏览器的部分而只是存在于内存中，每次渲染之时，React都会对比这一次与上一次渲染的虚拟DOM，如果有差别，仅仅修改有差别的部分即可。</p>
<h2 id="调和（diff算法）"><a href="#调和（diff算法）" class="headerlink" title="调和（diff算法）"></a>调和（diff算法）</h2><p>React在更新阶段会使用调和（Reconciliation）过程来找出原有的虚拟DOM和新生成的虚拟DOM的不同之处。按照现有的计算机科学算法研究结果，对比两个N个节点的树形结构的算法时间复杂度是O(N3)<sup>[1]</sup>。考虑到运算能力，DOM的复用程度，React实际采用的算法需要的时间复杂度是O(N)。</p>
<p>当React要对比两个虚拟DOM的树形结构的时候，从根节点开始递归向下对比，会遇到三种不同的情况：</p>
<ol>
<li>节点类型不同的情况</li>
<li>节点类型相同的情况</li>
<li>多个子组件的情况</li>
</ol>
<p>对于第一种节点类型不同的情况，也不用考虑是否复用它的子组件了，可以直接替换掉原有的树形结构，原有的树形结构上的React组件会经历Unmount过程。<br>对于第二种节点类型相同的情况，此时会区分节点的类型：一类是DOM元素类型，对应的是HTML直接支持的比如p、div、span等，此时只需要对属性和内容对比然后只更新修改的部分。例如：</p>
<p><img src="https://ws4.sinaimg.cn/large/006tNc79gy1fqwtawwh39j30e3059mxl.jpg" alt></p>
<p>改变之后变成:</p>
<p><img src="https://ws3.sinaimg.cn/large/006tNc79gy1fqwtbeon9gj30e3052weu.jpg" alt></p>
<p>React可以对比发现这些属性（选中部分）的变化，在操作DOM树上节点的时候，只去修改这些变化的部分。</p>
<p>另一类是React组件，对应的是React库定制的类型。这类节点的diff就会引发组件实例的更新过程，按照顺序引发组件的生命周期：</p>
<ul>
<li>componentWillReceiveProps (UNSAFE)</li>
<li>shouldComponentUpdate</li>
<li>componentWillUpdate (UNSAFE)</li>
<li>render</li>
<li>componentDidUpdate</li>
</ul>
<p>在这个过程中，如果shouldComponentUpdate函数返回false的话，那么更新过程就不在继续，它的子节点也不会参与更新。截至目前，React 16.3.2版本将原来的两个生命周期标注为UNSAFE并将在未来剔除。为了迎接新的Fiber架构和async rendering（异步渲染）避免主线程阻塞。</p>
<p>对于第三种拥有多个子组件的情况，React会直接挨个比较子组件，采用的方式则是前面描述的两种情况的解决办法。这时则会出现这种情况：</p>
<p><img src="https://ws4.sinaimg.cn/large/006tNc79gy1fqwtc01ddfj30e406k74s.jpg" alt></p>
<p>仅仅是在ul标签下unshift新增一个li.0，React会把逐个对比，把li.0的增加当作是li.1的修改，紧接着把li.2修改为li.1，最后增加了li.2。看起来的确很傻，但一个简单的算法就只能用这种方式处理问题。</p>
<p>此时React引入了key明确地标识每个组件，解决了这一问题。</p>
<p><img src="https://ws2.sinaimg.cn/large/006tNc79gy1fqwtccei13j30e406ljry.jpg" alt></p>
<p>值得注意的是，这里有一种反模式就是将元素在数组中的下标作为key（或是map时将index作为key），这是一种错误的使用key的方法。</p>
<h1 id="一切基于组件"><a href="#一切基于组件" class="headerlink" title="一切基于组件"></a>一切基于组件</h1><p>React的首要思想是通过组件（Component）来开发应用。所谓组件，简单说，指的是能够完成某个特定功能的独立的、可重用的代码。</p>
<p>基于组件的应用开发是广泛使用的软件开发模式，用分而治之的方法，把一个大的应用分解成若干个小的组件，每个组件只关注某个小范围的特定功能，但是把组件组合起来，就能够构成一个功能庞大的应用。如果分解功能的过程足够巧妙，那么每个组件可以在不同的场景下重复使用。在React的官方文档中，Component-Based是被标注出来的一个特性之一。</p>
<p>在使用过的React全家桶中，Redux就是创建了一个顶层的Provider组件，利用React的Context作为全局存储store而避免到处引用store。React-Router（V4）就是利用路径匹配，将路径映射为组件render出来。可以说React中的大部分拓展与实现，都是以组件为核心。</p>
<p>在单一职责原则下（SRP），组件可以被拥有两种职责：与数据（state）打交道和渲染用户界面。业界对于这两种的拆分具有多种叫法，如前者可以叫做容器组件，后者叫做展示组件；或是前者叫聪明组件，后者叫傻瓜组件。<br>前者一般处于外层，保存状态或者处理数据，拥有完整的生命周期；后者由于不管理状态，输出（界面）完全依赖于输入，可以看做是一个纯函数。</p>
<h2 id="高阶组件"><a href="#高阶组件" class="headerlink" title="高阶组件"></a>高阶组件</h2><p>高阶组件（HOC）是使用React的一种模式，用于增强现有组件的功能。简单来说，高阶组件就是一个接受函数，返回函数的函数。定义高阶组件的意义何在呢？首先可以重用代码，比如react-redux中容器组件的部分。其次可以修改现有的React组件的行为，比如运用高阶组件方式对antd中组件包裹，对原有的组件没有任何侵害。</p>
<p>根据返回的新组件和传入组件参数的关系，高阶组件的实现方式可以分为两大类：</p>
<ul>
<li>代理方式的高阶组件</li>
</ul>
<p><img src="https://ws3.sinaimg.cn/large/006tNc79gy1fqwte17ddfj30e307ljs7.jpg" alt></p>
<ul>
<li>继承方式的高阶组件</li>
</ul>
<p><img src="https://ws2.sinaimg.cn/large/006tNc79gy1fqwtefi98aj30e408tjsg.jpg" alt></p>
<p>代理方式和继承方式各有特点，这里我将书上的讲解对比列成表格</p>
<table>
<thead>
<tr>
<th>代理方式</th>
<th>继承方式</th>
</tr>
</thead>
<tbody>
<tr>
<td>操纵props</td>
<td>操纵props</td>
</tr>
<tr>
<td>访问ref</td>
<td>操纵生命周期函数<span style="color:red">*</span></td>
</tr>
<tr>
<td>抽取状态</td>
<td>-</td>
</tr>
<tr>
<td>包装组件</td>
<td>-</td>
</tr>
</tbody>
</table>
<p>书中更推荐代理的方式创建高阶组件，更加容易实现和控制；继承方式唯一的优势是可以操纵特定组件的声明周期函数。</p>
<h2 id="以函数为子组件"><a href="#以函数为子组件" class="headerlink" title="以函数为子组件"></a>以函数为子组件</h2><p>高阶函数并不是唯一可用于提高React组件代码重用的方法。高阶组件拓展现有组件功能的方式主要通过props。以代理方式为例，说到底两个组件是父子关系，两者的通讯关系也就props。每个组件通过propTypes声明自身支持的props，利用原组件的props来拓展功能，并且支持lint检查。但这也是高阶组件的缺点：要求统一接口。如果组件不能接受高阶组件传递的props，就没法使用这个高阶组件。</p>
<p><strong>以函数为子组件</strong>就是为了克服高阶函数的这个局限性，举一个书上的例子：</p>
<p><img src="https://ws4.sinaimg.cn/large/006tNc79ly1fqwth8jtksj30e30bw760.jpg" alt></p>
<p>使用这个AddUserProp的灵活之处在于它没有对被增强组件有任何props要求，只是传递一个参数过去，至于如何使用完全由子组件的函数决定。例如：</p>
<p><img src="https://ws3.sinaimg.cn/large/006tNc79ly1fqwthhu2alj309b09kwf8.jpg" alt></p>
<p>从上面2个使用样例可以看得出来，利用这种以函数为连接桥梁的方式十分灵活。</p>
<p>如果关注React16中新的Context API就可以发现，新的Context就是用这种方式来导入的。以下是我参考新API写的一个例子：</p>
<p><img src="https://ws3.sinaimg.cn/large/006tNc79ly1fqwthtxs79j30e30cnmyx.jpg" alt></p>
<p>可以看到Mycontxt.Consumer中包裹的就是一个函数，函数的形参则是在MyContext.Provider中传入的props。</p>
<h2 id="组件之间的通信"><a href="#组件之间的通信" class="headerlink" title="组件之间的通信"></a>组件之间的通信</h2><ul>
<li><strong>父组件至子组件的通信</strong></li>
</ul>
<p>通过props一层一层传递到子组件。</p>
<ul>
<li><strong>子组件至父组件的通信</strong></li>
</ul>
<p>将状态提升至父组件，父组件声明一个修改此状态的函数通过props传递到子组件，子组件需要传递信息时调用这个回调函数。</p>
<ul>
<li><strong>多组件通信</strong></li>
</ul>
<p>抽取一个组件，声明context，把需要通讯的组件作为子组件。各个组件可以通过context来共享数据。</p>
<h2 id="数据管理"><a href="#数据管理" class="headerlink" title="数据管理"></a>数据管理</h2><p>本书中仅讨论了Flux到Redux这数据管理层的技术栈，在社区中还有一些例如Mobx。限于对Mobx的理解不足，本文就暂时不予对比讨论。</p>
<h1 id="参考文献"><a href="#参考文献" class="headerlink" title="参考文献"></a>参考文献</h1><p>[1] Bille P. A survey on tree edit distance and related problems[M]. Elsevier Science Publishers Ltd. 2005.</p>

      
    </div>
    
    
    

    

    

    

    <footer class="post-footer">
      
        <div class="post-tags">
          
            <a href="/tags/JavaScript/" rel="tag"># JavaScript</a>
          
            <a href="/tags/React/" rel="tag"># React</a>
          
            <a href="/tags/Redux/" rel="tag"># Redux</a>
          
        </div>
      

      
      
      

      
        <div class="post-nav">
          <div class="post-nav-next post-nav-item">
            
              <a href="/2018/04/14/2018-04-14 YDNJS-mid/" rel="next" title="你不知道的JS中卷 笔记">
                <i class="fa fa-chevron-left"></i> 你不知道的JS中卷 笔记
              </a>
            
          </div>

          <span class="post-nav-divider"></span>

          <div class="post-nav-prev post-nav-item">
            
              <a href="/2018/05/11/2018-5-11-two-practice/" rel="prev" title="js练习两则">
                js练习两则 <i class="fa fa-chevron-right"></i>
              </a>
            
          </div>
        </div>
      

      
      
    </footer>
  </div>
  
  
  
  </article>



    <div class="post-spread">
      
    </div>
  </div>


          </div>
          


          

  



        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    
    <div class="sidebar-inner">

      

      
        <ul class="sidebar-nav motion-element">
          <li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap">
            文章目录
          </li>
          <li class="sidebar-nav-overview" data-target="site-overview-wrap">
            站点概览
          </li>
        </ul>
      

      <section class="site-overview-wrap sidebar-panel">
        <div class="site-overview">
          <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
            
              <img class="site-author-image" itemprop="image" src="/images/avatar.jpg" alt="何米酥">
            
              <p class="site-author-name" itemprop="name">何米酥</p>
              <p class="site-description motion-element" itemprop="description">Just do...</p>
          </div>

          <nav class="site-state motion-element">

            
              <div class="site-state-item site-state-posts">
              
                <a href="/archives/">
              
                  <span class="site-state-item-count">202</span>
                  <span class="site-state-item-name">日志</span>
                </a>
              </div>
            

            
              
              
              <div class="site-state-item site-state-categories">
                <a href="/categories/index.html">
                  <span class="site-state-item-count">8</span>
                  <span class="site-state-item-name">分类</span>
                </a>
              </div>
            

            
              
              
              <div class="site-state-item site-state-tags">
                <a href="/tags/index.html">
                  <span class="site-state-item-count">78</span>
                  <span class="site-state-item-name">标签</span>
                </a>
              </div>
            

          </nav>

          

          
            <div class="links-of-author motion-element">
                
                  <span class="links-of-author-item">
                    <a href="https://github.com/hemisu" target="_blank" title="GitHub">
                      
                        <i class="fa fa-fw fa-github"></i>GitHub</a>
                  </span>
                
                  <span class="links-of-author-item">
                    <a href="https://www.zhihu.com/people/hemisu" target="_blank" title="知乎">
                      
                        <i class="fa fa-fw fa-globe"></i>知乎</a>
                  </span>
                
            </div>
          

          
          

          
          

          

        </div>
      </section>

      
      <!--noindex-->
        <section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
          <div class="post-toc">

            
              
            

            
              <div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#前言"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#数据驱动的响应式编程"><span class="nav-number">2.</span> <span class="nav-text">数据驱动的响应式编程</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#虚拟DOM"><span class="nav-number">2.1.</span> <span class="nav-text">虚拟DOM</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#调和（diff算法）"><span class="nav-number">2.2.</span> <span class="nav-text">调和（diff算法）</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#一切基于组件"><span class="nav-number">3.</span> <span class="nav-text">一切基于组件</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#高阶组件"><span class="nav-number">3.1.</span> <span class="nav-text">高阶组件</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#以函数为子组件"><span class="nav-number">3.2.</span> <span class="nav-text">以函数为子组件</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#组件之间的通信"><span class="nav-number">3.3.</span> <span class="nav-text">组件之间的通信</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#数据管理"><span class="nav-number">3.4.</span> <span class="nav-text">数据管理</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#参考文献"><span class="nav-number">4.</span> <span class="nav-text">参考文献</span></a></li></ol></div>
            

          </div>
        </section>
      <!--/noindex-->
      

      
        <div class="back-to-top">
          <i class="fa fa-arrow-up"></i>
          
            <span id="scrollpercent"><span>0</span>%</span>
          
        </div>
      

    </div>
  </aside>


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <div class="copyright">&copy; 2015 &mdash; <span itemprop="copyrightYear">2020</span>
  <span class="with-love">
    <i class="fa fa-user"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">何米酥</span>

  
</div>


  <div class="powered-by">由 <a class="theme-link" target="_blank" href="https://hexo.io">Hexo</a> 强力驱动</div>



  <span class="post-meta-divider">|</span>



  <div class="theme-info">主题 &mdash; <a class="theme-link" target="_blank" href="https://github.com/iissnan/hexo-theme-next">NexT.Gemini</a> v5.1.4</div>




        







        
      </div>
    </footer>

    

    

  </div>

  

<script type="text/javascript">
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>









  












  
  
    <script type="text/javascript" src="/lib/jquery/index.js?v=2.1.3"></script>
  

  
  
    <script type="text/javascript" src="/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script>
  

  
  
    <script type="text/javascript" src="/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script>
  

  
  
    <script type="text/javascript" src="/lib/velocity/velocity.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/lib/velocity/velocity.ui.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
  


  


  <script type="text/javascript" src="/js/src/utils.js?v=5.1.4"></script>

  <script type="text/javascript" src="/js/src/motion.js?v=5.1.4"></script>



  
  


  <script type="text/javascript" src="/js/src/affix.js?v=5.1.4"></script>

  <script type="text/javascript" src="/js/src/schemes/pisces.js?v=5.1.4"></script>



  
  <script type="text/javascript" src="/js/src/scrollspy.js?v=5.1.4"></script>
<script type="text/javascript" src="/js/src/post-details.js?v=5.1.4"></script>



  


  <script type="text/javascript" src="/js/src/bootstrap.js?v=5.1.4"></script>



  


  




	





  





  












  





  

  

  

  
  

  

  

  

</body>
</html>
